<template>
  <div class="xj-store">
    <van-nav-bar title="商家首页" left-arrow @click-left="back()" />
    <!-- 顶部 -->
    <div class="top-banner">
      <div class="hc-swiper">
        <van-swipe class="my-swipe" :autoplay="5000" :show-indicators="false">
          <van-swipe-item v-for="(item, index) in goods_list" :key="index">
            <img v-lazy="publicUrl + item.filepath" alt="">
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 联系 -->
      <div class="contact">
        <!-- 左头像 -->
        <div class="left-head" @click="jump('detail', {id: shopData.info.b_id})">
          <div>
            <img v-lazy="publicUrl + shopData.info.filepath" alt="">
          </div>
        </div>
        <!-- 欢迎 -->
        <div class="mid-welcome" @click="jump('detail', {id: shopData.info.b_id})">
          <div style>{{shopData.info.b_title}}</div>
          <div>
            <span>{{shopData.cnt || 0}}人收藏了本店 |</span>
            <span>{{shopData.dis}}km</span>
          </div>
        </div>
        <!-- 电话 -->
        <div class="right-tell" @click="handlerCollect(shopData.info.b_id)">
          <div>
            <van-icon :name="shopData.is_collect != 0 ? 'star' : 'star-o'" :color="shopData.is_collect != 0 ? '#f09d53' : '#ccc'" size="0.45rem" />
          </div>
          <div style="color:#fff">{{shopData.is_collect != 0 ? '已收藏' : '收藏'}}</div>
        </div>
      </div>
    </div>

    <!-- all goods -->
    <div class="all-goods">全部商品</div>

    <!-- 商品详情 -->
    <div class="recommend">
      <div class="commend-goods">
        <ul>
          <li @click="jump('goodsdetail', { id: goods.id })" v-for="(goods,index) in shopData.goods_list" :key="index">
            <div class="goods-pic">
              <img v-lazy="publicUrl + goods.filepath">
            </div>
            <div class="goods-name">{{goods.title}}</div>
            <div class="price">
              ¥{{goods.price}}
              <span>¥{{goods.old_price}}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { postShop, postAddLikeShop } from '../../api/ajax';
export default {
  data: function() {
    return {
      banner: [
        { top: "/static/detail/static.jpg" },
        { top: "/static/detail/static1.jpg" },
        { top: "/static/detail/static2.jpg" },
        { top: "/static/detail/static3.jpg" },
        { top: "/static/detail/static4.jpg" }
      ],
      count: 0,
      score: 4.7,
      address: "广东省深圳市福田区华强北街道打发撒大声地纺二楼111",
      headDiv: {
        backgroundImage: "url('/static/detail/head.jpg')",
        backgroundSize: "cover"
      },
      shopData: {info: {}},
      goods_list: []
    };
  },
  mounted() {
    this.postShop()
  },
  methods: {
    async handlerCollect(id) {
      await postAddLikeShop({ id });
      this.postShop();
    },
    async postShop(keyword) {
      let locationPoint = this.$pcCookie.get('locationPoint') || '';
      let lng = locationPoint.split(',')[0]
      let lat = locationPoint.split(',')[1]
      const { id } = this.$route.query
      const result = await postShop({
        id,
        lng,
        lat,
        keyword
      })
      this.shopData = result;
      this.goods_list = result.goods_list || []
      this.shopData.dis = result.dis.toFixed(2)
      console.log(result)
    }
  }
};
</script>
<style lang="scss" scoped>
.xj-store {
  // 顶部
  .top-banner {
    height: 66vw;
    background-color: rgba($color: #000000, $alpha: 0.8);
    position: relative;
    .hc-swiper {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      .my-swipe {
        width: 100%;
        height: 100%;
        .van-swipe-item {
          img {
            width: 100%;
          }
        }
      }
    }
    //联系方式
    .contact {
      color: #aaa;
      height: px2rem(78);
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      .left-head {
        width: 22%;
        margin: auto 0;
        div {
          margin: 0 auto;
          width: px2rem(45);
          background-color: rgba(255, 255, 255, 0.9);
          height: px2rem(45);
          img {
            width: 100%;
          }
        }
      }
      .mid-welcome {
        margin: auto 0;
        width: 60%;
        color: #ffffff;
        div:first-child {
          // font-weight: bold;
          letter-spacing: px2rem(3);
          font-size: px2rem(15);
        }
        div:last-child {
          padding-top: px2rem(4);
          padding-bottom: px2rem(4);
          color: gray;
        }
      }
      .right-tell {
        width: 15%;
        margin: auto 0;
        text-align: center;
        .circle {
          display: flex;
          float: right;
          margin: 0 auto;
          width: px2rem(35);
          height: px2rem(35);
          border-radius: 50%;
          border: px2rem(1) #6e90e6 solid;
          div {
            margin: auto auto;
          }
        }
      }
    }
  }

  //all-goods
  .all-goods {
    height: px2rem(45);
    background-color: #fff;
    text-align: center;
    line-height: px2rem(45);
    font-size: px2rem(14);
    letter-spacing: px2rem(3);
    color: #f09d53;
  }

  //商品详情
  .recommend {
    overflow: hidden;
    .commend-goods {
      li {
        float: left;
        width: 50%;
        text-align: center;
        line-height: px2rem(25);
        height: px2rem(245);
      }
      .goods-pic {
        width: px2rem(175);
        height: px2rem(175);
        margin: px2rem(5) auto;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
      .goods-name {
        width: px2rem(175);
        // float: left;
        margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .price {
        color: #de853e;
        font-size: px2rem(18);
        span {
          color: gray;
          font-size: px2rem(13);
          text-decoration: line-through;
        }
      }
    }
  }
}
</style>
